ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করার জন্য একটি ইভেন্ট-চালিত মডেল প্রদান করে। ExtJS এর ইভেন্ট ম্যানেজমেন্ট ব্যবস্থাটি সিস্টেমটিকে অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। ব্যবহারকারীর ইন্টারঅ্যাকশন বা ইভেন্টগুলোর উপর ভিত্তি করে অ্যাপ্লিকেশন এর আচরণ নিয়ন্ত্রণ করা হয়।

ExtJS ইভেন্ট ম্যানেজমেন্টের প্রধান ধারণা

ExtJS এ ইভেন্ট ম্যানেজমেন্টের জন্য কয়েকটি মূল ধারণা রয়েছে:

1. ইভেন্ট হ্যান্ডলার: কোনো ইভেন্ট ঘটলে যে ফাংশনটি চালানো হয়।
2. ইভেন্ট লিসেনার: এক বা একাধিক ইভেন্টের জন্য ফাংশন বা হ্যান্ডলার সংযুক্ত করা।
3. ডেলিগেটেড ইভেন্ট: পারেন্ট এলিমেন্টের মাধ্যমে সাব এলিমেন্টের ইভেন্ট হ্যান্ডলিং।

ExtJS ইভেন্ট হ্যান্ডলিং

ExtJS এ ইভেন্ট হ্যান্ডলিং সাধারণত দুটি প্রধান উপায়ে করা হয়:

1. ডিরেক্ট ইভেন্ট হ্যান্ডলিং
2. ডেলিগেটেড ইভেন্ট হ্যান্ডলিং

১. ডিরেক্ট ইভেন্ট হ্যান্ডলিং

ডিরেক্ট ইভেন্ট হ্যান্ডলিংয়ে, প্রতিটি কম্পোনেন্টের সাথে এক বা একাধিক ইভেন্ট লিসেনার যুক্ত করা হয়। যেমন, বাটনে ক্লিক ইভেন্ট হ্যান্ডল করার জন্য:

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    handler: function() {
        Ext.Msg.alert('Button Clicked', 'You clicked the button!');
    }
});

এখানে, handler কনফিগারেশন প্রপার্টি ব্যবহার করে বাটন ক্লিকের জন্য একটি ফাংশন সংযুক্ত করা হয়েছে। যখন ব্যবহারকারী বাটনে ক্লিক করবে, তখন একটি মেসেজ আলার্ট প্রদর্শিত হবে।

২. ডেলিগেটেড ইভেন্ট হ্যান্ডলিং

ডেলিগেটেড ইভেন্ট হ্যান্ডলিংয়ে, মূল কম্পোনেন্টের উপর ইভেন্ট লিসেনার যোগ করা হয় এবং এটি তার চাইল্ড এলিমেন্টগুলোর ইভেন্টগুলি হ্যান্ডল করতে পারে।

উদাহরণ:

Ext.create('Ext.Panel', {
    title: 'Panel with Button',
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'button',
            text: 'Click Me',
            itemId: 'clickButton'
        }
    ],
    listeners: {
        afterrender: function(panel) {
            panel.down('#clickButton').on('click', function() {
                Ext.Msg.alert('Button Clicked', 'The button inside the panel was clicked!');
            });
        }
    }
});

এখানে listeners কনফিগারেশন ব্যবহার করে প্যানেলের ইভেন্ট ম্যানেজমেন্ট করা হয়েছে এবং প্যানেলের মধ্যে একটি বাটনের ক্লিক ইভেন্ট হ্যান্ডল করা হয়েছে।

ExtJS এ ইভেন্ট টাইপ

ExtJS বিভিন্ন ধরনের ইভেন্ট প্রদান করে, যেমন:

• Mouse Events: click, dblclick, mouseover, mouseout
• Keyboard Events: keydown, keyup, keypress
• Form Events: change, submit
• Window Events: resize, close
• DOM Events: focus, blur, load, error

ExtJS ইভেন্ট লিসেনার ব্যবহার

ExtJS এ ইভেন্ট লিসেনার সেট করা বিভিন্ন উপায়ে করা যায়, যেমন:

1. addListener: একটি কম্পোনেন্ট বা DOM এলিমেন্টে ইভেন্ট লিসেনার যোগ করা।
2. removeListener: একটি ইভেন্ট লিসেনার মুছে ফেলা।
3. on: ক্লাস, স্টোর, গ্রিড, বা কম্পোনেন্টের জন্য ইভেন্ট সংযুক্ত করা।

উদাহরণ:

var button = Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody()
});

// addListener ব্যবহার
button.addListener('click', function() {
    Ext.Msg.alert('Button Clicked', 'You clicked the button using addListener!');
});

// on ব্যবহার
button.on('click', function() {
    Ext.Msg.alert('Button Clicked', 'You clicked the button using on!');
});

ইভেন্ট প্রপাগেশন এবং স্টপিং

ExtJS এর ইভেন্ট ম্যানেজমেন্ট সিস্টেম ইভেন্ট প্রপাগেশন এবং বুবলিং (bubbling) এর জন্য সমর্থন প্রদান করে। ইভেন্ট প্রপাগেশন নিয়ন্ত্রণ করা যায় stopEvent এবং stopPropagation এর মাধ্যমে।

উদাহরণ: ইভেন্ট প্রপাগেশন বন্ধ করা

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function(event) {
            event.stopEvent(); // ইভেন্ট প্রপাগেশন বন্ধ
            Ext.Msg.alert('Button Clicked', 'Event propagation stopped!');
        }
    }
});

এখানে, stopEvent() মেথডটি ব্যবহার করে ইভেন্ট প্রপাগেশন বন্ধ করা হয়েছে, অর্থাৎ ইভেন্টটি বুবলিং করতে পারবে না।

ExtJS ইভেন্ট লিসেনিং এবং ডেলিগেশন

একটি প্যানেল বা গ্রিডের ইভেন্ট হ্যান্ডল করার জন্য, আপনি ইভেন্ট ডেলিগেশন ব্যবহার করতে পারেন, যার মাধ্যমে প্যানেল বা গ্রিডের সাব-কম্পোনেন্টগুলোর ইভেন্টগুলোও পরিচালনা করা যায়।

উদাহরণ:

Ext.create('Ext.Panel', {
    title: 'Panel with Button',
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'button',
            text: 'Click Me',
            itemId: 'clickButton'
        }
    ],
    listeners: {
        afterrender: function(panel) {
            panel.el.on('click', function(event, target) {
                if (Ext.get(target).is('button')) {
                    Ext.Msg.alert('Button Clicked', 'A button was clicked!');
                }
            });
        }
    }
});

এখানে, panel.el.on('click') ব্যবহার করে প্যানেলের সাব-কম্পোনেন্টের ক্লিক ইভেন্ট হ্যান্ডল করা হচ্ছে।

সারাংশ

• Event Handling: ExtJS এর ইভেন্ট ম্যানেজমেন্টে handler এবং listeners এর মাধ্যমে ইভেন্ট হ্যান্ডলিং করা হয়।
• Event Types: ExtJS বিভিন্ন ধরনের ইভেন্ট (যেমন mouse, keyboard, form, window events) সমর্থন করে।
• Event Delegation: একটি প্যারেন্ট কম্পোনেন্টের মাধ্যমে সাব-কম্পোনেন্টের ইভেন্ট হ্যান্ডলিং করা সম্ভব।
• Stop Event Propagation: stopEvent() এবং stopPropagation() ব্যবহার করে ইভেন্ট প্রপাগেশন বন্ধ করা যায়।

এভাবে, ExtJS ইভেন্ট ম্যানেজমেন্ট সিস্টেম আপনাকে কার্যকরী ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে সহায়ক এবং এটি অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে সাহায্য করে।

Events (ইভেন্টস) হল ইউজার ইন্টারঅ্যাকশনের প্রতি অ্যাপ্লিকেশন প্রতিক্রিয়া জানানোর পদ্ধতি। ExtJS একটি ইভেন্ট-ড্রিভেন ফ্রেমওয়ার্ক, যেখানে বিভিন্ন ইভেন্ট নির্দিষ্ট কম্পোনেন্ট বা UI উপাদানগুলোর সাথে সম্পর্কিত থাকে। যেমন: বাটন ক্লিক করা, ফর্ম সাবমিট করা, মাউসের হোভার করা ইত্যাদি। ExtJS এর ইভেন্ট সিস্টেম আপনাকে এই ধরনের ইউজার ইন্টারঅ্যাকশন সহজেই হ্যান্ডেল করতে সাহায্য করে।

ExtJS এ ইভেন্টস কী?

ইভেন্টস হল ইউজারের অ্যাপ্লিকেশন সঙ্গে ইন্টারঅ্যাকশন করার কাজগুলো, যেমন ক্লিক, হোভার, কীবোর্ড ইনপুট, ড্র্যাগ-এন্ড-ড্রপ ইত্যাদি। এই ধরনের ইভেন্ট গুলি সাধারণত ইউজারের একটি অ্যাকশন (যেমন, বাটন ক্লিক, মাউসের হোভার) বা সিস্টেমের পরিবর্তনের মাধ্যমে তৈরি হয়। ExtJS এই ইভেন্টগুলিকে ইভেন্ট হ্যান্ডলার বা ইভেন্ট লিসেনার এর মাধ্যমে হ্যান্ডল করতে সহায়ক করে।

ExtJS ইভেন্ট সিস্টেমের মৌলিক ধারণা

1. ইভেন্ট লিসেনার:
   ইভেন্ট লিসেনার হল এমন একটি ফাংশন বা মেথড যা একটি নির্দিষ্ট ইভেন্টের প্রতি প্রতিক্রিয়া জানাতে ব্যবহৃত হয়। যখন নির্দিষ্ট ইভেন্টটি ঘটে, তখন লিসেনারটি চালু হয়।
2. ইভেন্ট হ্যান্ডলার:
   ইভেন্ট হ্যান্ডলার একটি ফাংশন বা মেথড যা নির্দিষ্ট ইভেন্টের জন্য কার্যকরী প্রতিক্রিয়া প্রদান করে। এটি ইউজারের ইনপুট বা অ্যাকশনের প্রতিক্রিয়া হিসেবে কোনো অ্যাকশন সম্পন্ন করতে ব্যবহৃত হয়।

ExtJS-এ ইভেন্টস হ্যান্ডল করা

ExtJS তে ইভেন্ট হ্যান্ডল করার দুটি প্রধান পদ্ধতি রয়েছে:

1. listeners কনফিগারেশন:
   প্রতিটি ExtJS কম্পোনেন্টে listeners কনফিগারেশন ব্যবহার করে ইভেন্ট হ্যান্ডল করা যায়। এটি ইভেন্টগুলোকে ম্যানেজ করার জন্য সাধারণত ব্যবহার করা হয়।
2. addListener মেথড:
   addListener মেথড ব্যবহার করে ইভেন্টের জন্য লিসেনার যোগ করা যায়।

১. listeners কনফিগারেশন

listeners কনফিগারেশন একটি কম্পোনেন্টের জন্য বিভিন্ন ইভেন্ট হ্যান্ডল করার সহজ পদ্ধতি। এটি সাধারণত কম্পোনেন্টের কনফিগারেশনের অংশ হিসেবে ব্যবহৃত হয়।

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            alert('Button clicked!');
        }
    }
});

এখানে, click ইভেন্টটি হ্যান্ডল করা হয়েছে। যখন বাটনে ক্লিক করা হবে, তখন একটি এলার্ট দেখানো হবে।

২. addListener মেথড

addListener মেথড ব্যবহার করে নির্দিষ্ট ইভেন্টে লিসেনার যোগ করা হয়। এটি আপনাকে কোডের যেকোনো স্থানে ইভেন্ট হ্যান্ডল করার সুবিধা দেয়।

উদাহরণ:

var button = Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody()
});

button.addListener('click', function() {
    alert('Button clicked using addListener!');
});

এখানে, addListener মেথড ব্যবহার করে click ইভেন্ট হ্যান্ডল করা হয়েছে।

ExtJS-এ কিছু সাধারণ ইভেন্ট

1. click:
   বাটন, ট্যাব, অথবা যেকোনো কম্পোনেন্টে ক্লিক করার ইভেন্ট।
   উদাহরণ:

   listeners: {
       click: function() {
           alert('Button clicked!');
       }
   }
   

2. change:
   ফর্ম ফিল্ডের মান পরিবর্তিত হলে ইভেন্ট।
   উদাহরণ:

   listeners: {
       change: function(field, newValue, oldValue) {
           console.log('Field value changed from ' + oldValue + ' to ' + newValue);
       }
   }
   

3. mouseover:
   মাউস একটি কম্পোনেন্টের উপর গেলে ইভেন্ট।
   উদাহরণ:

   listeners: {
       mouseover: function() {
           console.log('Mouse is over the element');
       }
   }
   

4. keydown এবং keyup:
   কীবোর্ডে চাপ দেওয়া বা ছেড়ে দেওয়া ইভেন্ট।
   উদাহরণ:

   listeners: {
       keydown: function(field, e) {
           console.log('Key pressed: ' + e.getKey());
       }
   }
   

ইভেন্ট প্যারামিটার

প্রতিটি ইভেন্টের সাথে কিছু গুরুত্বপূর্ণ প্যারামিটার পাওয়া যায়:

1. e: ইভেন্ট অবজেক্ট যা ইভেন্ট সম্পর্কিত তথ্য ধারণ করে (যেমন মাউস পজিশন, কী কোড ইত্যাদি)।
2. target: যে এলিমেন্টে ইভেন্ট ঘটেছে।
3. type: ইভেন্টের ধরন (যেমন click, keydown ইত্যাদি)।

ইভেন্ট ডেলিগেশন

ইভেন্ট ডেলিগেশন হল একাধিক এলিমেন্টে একই ইভেন্ট হ্যান্ডল করার একটি পদ্ধতি। এটি সাধারণত ডাইনামিক কম্পোনেন্টের জন্য ব্যবহৃত হয়, যেখানে আপনি একটি প্যারেন্ট কম্পোনেন্টে ইভেন্ট হ্যান্ডলার যুক্ত করেন এবং ইভেন্টটি তার মধ্যে থাকা চাইল্ড এলিমেন্টগুলির উপর প্রয়োগ হয়।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Event Delegation Example',
    renderTo: Ext.getBody(),
    html: '<button class="my-btn">Click Me</button>',
    listeners: {
        click: function(e, target) {
            if (target.className === 'my-btn') {
                alert('Button clicked inside panel');
            }
        }
    }
});

এখানে, প্যানেলটির মধ্যে থাকা বাটন ক্লিক করার জন্য ইভেন্ট ডেলিগেশন ব্যবহার করা হয়েছে।

সারাংশ

• Events হল ইউজারের অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাকশন করার পদ্ধতি।
• ExtJS তে ইভেন্ট হ্যান্ডলিং করার জন্য listeners কনফিগারেশন এবং addListener মেথড ব্যবহৃত হয়।
• ExtJS ইভেন্ট সিস্টেম আপনাকে click, mouseover, change, keydown ইত্যাদি ইভেন্ট হ্যান্ডল করার সুযোগ দেয়।
• ইভেন্ট ডেলিগেশন ডাইনামিকভাবে এলিমেন্টে ইভেন্ট হ্যান্ডল করার জন্য ব্যবহৃত হয়।

এটি ExtJS অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, যা ইউজারের ইন্টারঅ্যাকশন এর উপর ভিত্তি করে অ্যাপ্লিকেশন প্রতিক্রিয়া জানায়।

ExtJS এ Event Listeners এবং Handlers ব্যবহৃত হয় ইউজার ইন্টারঅ্যাকশনে (যেমন: ক্লিক, হোভার, কীবোর্ড ইনপুট ইত্যাদি) রেসপন্স জানাতে। এক্সটিজেএস একটি শক্তিশালী ইভেন্ট সিস্টেম সরবরাহ করে, যা ডেভেলপারদের তাদের অ্যাপ্লিকেশনে ইন্টারঅ্যাকশনের জন্য সহজে ইভেন্ট লিসেনার এবং হ্যান্ডলার কনফিগার করতে দেয়।

১. Event Listener

Event Listener হলো এমন একটি ফাংশন বা মেথড যা নির্দিষ্ট একটি ইভেন্টের জন্য অপেক্ষা করে এবং সেই ইভেন্টটি ঘটলে এটি ট্রিগার হয়। ExtJS এ, event listeners সাধারণত কম্পোনেন্টে যোগ করা হয়, যেমন বাটন ক্লিক, মাউস মুভ, বা ফর্ম সাবমিটের জন্য।

ইভেন্ট লিসেনার কনফিগারেশন

একটি কম্পোনেন্টের জন্য ইভেন্ট লিসেনার কনফিগার করতে, আপনি listeners কনফিগারেশন ব্যবহার করতে পারেন, যা কম্পোনেন্টের নির্দিষ্ট ইভেন্টের জন্য ফাংশন নির্ধারণ করে।

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            alert('Button clicked!');
        }
    }
});

এখানে, click ইভেন্টের জন্য একটি লিসেনার কনফিগার করা হয়েছে যা বাটনে ক্লিক করলে একটি অ্যালার্ট বক্স প্রদর্শন করবে।

২. Event Handler

Event Handler হল একটি ফাংশন যা একটি ইভেন্ট ঘটলে তার সাথে সম্পর্কিত কোনো কাজ সম্পন্ন করতে ব্যবহৃত হয়। ExtJS এ, আপনি ইভেন্ট হ্যান্ডলার কনফিগার করে তার ভিতরে যে কোডটি চালাতে চান তা লিখতে পারেন।

হ্যান্ডলার কনফিগারেশন

handler কনফিগারেশন ব্যবহার করে আপনি ইভেন্ট হ্যান্ডলার ফাংশন নির্ধারণ করতে পারেন, যা কম্পোনেন্টে ইভেন্ট ঘটলে চালিত হয়।

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Submit',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('Submit button clicked!');
    }
});

এখানে, handler কনফিগারেশন দ্বারা Submit বাটনের জন্য একটি ইভেন্ট হ্যান্ডলার তৈরি করা হয়েছে, যা বাটনে ক্লিক করলে অ্যালার্ট দেখাবে।

৩. Listeners এবং Handlers এর মধ্যে পার্থক্য

• Event Listeners:
  • লিসেনার গঠন বেশি ফ্লেক্সিবল এবং এটি একাধিক ইভেন্ট হ্যান্ডল করতে সাহায্য করে।
  • আপনি একাধিক ইভেন্টের জন্য একটি একক ফাংশন ব্যবহার করতে পারেন (যেমন, click, mouseover, dblclick ইত্যাদি)।
• Event Handlers:
  • সাধারণত একক ইভেন্টের জন্য সরাসরি একটি ফাংশন প্রদান করা হয়।
  • এটি একটি সহজ এবং সরল পদ্ধতি যেখানে সাধারণত একটি নির্দিষ্ট ইভেন্টের জন্য শুধুমাত্র একটি ফাংশন লিখা হয়।

৪. একাধিক ইভেন্ট লিসেনার কনফিগার করা

একটি কম্পোনেন্টে একাধিক ইভেন্ট লিসেনার কনফিগার করতে, আপনি listeners অবজেক্টে একাধিক ইভেন্ট হ্যান্ডলিং ফাংশন যোগ করতে পারেন।

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click or Hover',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            alert('Button clicked!');
        },
        mouseover: function() {
            this.setText('Mouse Over'); // বাটনের লেখা পরিবর্তন
        },
        mouseout: function() {
            this.setText('Click or Hover'); // আবার বাটনের লেখা আগের মতো
        }
    }
});

এখানে, click, mouseover, এবং mouseout ইভেন্টগুলোর জন্য আলাদা আলাদা লিসেনার কনফিগার করা হয়েছে।

৫. Event Object (ইভেন্ট অবজেক্ট)

ইভেন্ট লিসেনার এবং হ্যান্ডলার ফাংশনের মধ্যে একটি event অবজেক্ট পাঠানো হয় যা ইভেন্টের সকল তথ্য ধারণ করে, যেমন ইভেন্টের ধরন, টার্গেট এলিমেন্ট, এবং অন্যান্য প্রাসঙ্গিক তথ্য। এই অবজেক্টটি ইভেন্টের সাথে সম্পর্কিত মেটাডেটা সরবরাহ করে।

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function(event) {
            console.log('Event Target:', event.target); // ক্লিক করা এলিমেন্ট দেখাবে
        }
    }
});

এখানে, event.target ব্যবহার করে ক্লিক করা এলিমেন্টের তথ্য লগ করা হয়েছে।

৬. Bubble Events (বাবলিং ইভেন্টস)

ExtJS এ, কিছু ইভেন্ট বাবা-মা কম্পোনেন্টের দিকে "বাবল" (propagate) করে। একে event bubbling বলা হয়। বাবা কম্পোনেন্টে ইভেন্টটি শ্রবণ করার জন্য, আপনি delegate কনফিগারেশন ব্যবহার করতে পারেন। এটি বিশেষভাবে দরকারি যখন আপনি DOM এর বিভিন্ন স্তরে একই ইভেন্ট হ্যান্ডল করতে চান।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Click Event on Panel',
    width: 200,
    height: 200,
    renderTo: Ext.getBody(),
    listeners: {
        click: {
            fn: function() {
                alert('Panel clicked!');
            },
            delegate: '.x-panel-header' // শুধুমাত্র প্যানেলের হেডারে ক্লিক করলে ট্রিগার হবে
        }
    }
});

এখানে, click ইভেন্টটি .x-panel-header এর উপর বাবল হবে এবং প্যানেলের হেডারে ক্লিক করলে ইভেন্টটি ট্রিগার হবে।

সারাংশ

• Event Listeners এবং Event Handlers ExtJS অ্যাপ্লিকেশন তৈরি করার সময় ইউজার ইন্টারঅ্যাকশনের জন্য অত্যন্ত গুরুত্বপূর্ণ।
• Event Listener একটি ফাংশন বা মেথড যা নির্দিষ্ট একটি ইভেন্টের জন্য অপেক্ষা করে এবং ইভেন্টটি ঘটলে এটি ট্রিগার হয়।
• Event Handler একটি ফাংশন যা নির্দিষ্ট ইভেন্টের জন্য ইভেন্ট সংঘটিত হলে কাজ করে।
• একাধিক ইভেন্ট কনফিগার করতে আপনি listeners কনফিগারেশন ব্যবহার করতে পারেন।
• Event Object ব্যবহার করে ইভেন্ট সম্পর্কিত বিস্তারিত তথ্য সংগ্রহ করা যায়।

এই ইভেন্ট সিস্টেমগুলি এক্সটিজেএস অ্যাপ্লিকেশনে ইউজার ইন্টারঅ্যাকশন সহজে পরিচালনা করতে সাহায্য করে।

ExtJS তে কাস্টম ইভেন্ট (Custom Event) তৈরি করার মাধ্যমে আপনি কাস্টম আচরণ বা ইভেন্ট হ্যান্ডলিং যুক্ত করতে পারেন যা ডিফল্ট ইভেন্টগুলির বাইরেও কাজ করে। কাস্টম ইভেন্টগুলি ভিউ কম্পোনেন্টের ইন্টারঅ্যাকশনের উপর ভিত্তি করে চলতে পারে এবং অ্যাপ্লিকেশনের মধ্যে ইভেন্টের সমন্বয় ঘটাতে সহায়ক।

কাস্টম ইভেন্ট কী?

কাস্টম ইভেন্টগুলি হলো ইউজার ইন্টারঅ্যাকশনের মাধ্যমে বা কোডের মাধ্যমে ট্রিগার হওয়া ইভেন্ট যা আপনি নিজে তৈরি করেন। এগুলি সাধারণত একটি কম্পোনেন্টের মধ্যে বিশেষ পরিস্থিতি মোকাবেলা করার জন্য ব্যবহার করা হয়।

এখানে কাস্টম ইভেন্ট তৈরি করার প্রক্রিয়া এবং তার ব্যবহার দেখানো হয়েছে।

কাস্টম ইভেন্ট তৈরি করার জন্য প্রয়োজনীয় ধাপ

1. কাস্টম ইভেন্ট ডিফাইন করা
   প্রথমে কম্পোনেন্টে কাস্টম ইভেন্ট ডিফাইন করতে হবে। এটি Ext.Component ক্লাস বা এর সাবক্লাসে ইভেন্ট ডিফাইন করা যায়।
2. কাস্টম ইভেন্ট ট্রিগার করা
   যখন ইভেন্টটি ঘটবে, তখন fireEvent মেথড ব্যবহার করে কাস্টম ইভেন্টটি ট্রিগার করতে হবে।
3. ইভেন্ট হ্যান্ডলার
   কাস্টম ইভেন্টটি হ্যান্ডল করার জন্য একটি ইভেন্ট লিসেনার তৈরি করতে হবে, যা ইভেন্টটি ঘটলে একটি নির্দিষ্ট অ্যাকশন সম্পন্ন করবে।

উদাহরণ: কাস্টম ইভেন্ট তৈরি করা

ধরা যাক, আমরা একটি UserPanel কম্পোনেন্ট তৈরি করছি, যা একটি কাস্টম ইভেন্ট userLoggedIn ট্রিগার করবে যখন ব্যবহারকারী লগইন করবে। এই ইভেন্টটি সঠিকভাবে হ্যান্ডল করার জন্য একটি লিসেনার তৈরি করা হবে।

১. কাস্টম ইভেন্ট ডিফাইন করা

Ext.define('MyApp.view.UserPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'userpanel',
    title: 'User Panel',
    
    // কাস্টম ইভেন্ট ডিফাইন করা
    fireLoginEvent: function(userName) {
        this.fireEvent('userLoggedIn', userName); // কাস্টম ইভেন্ট ট্রিগার করা
    }
});

এখানে, fireLoginEvent মেথডটি userLoggedIn নামে একটি কাস্টম ইভেন্ট ট্রিগার করবে এবং এতে ব্যবহারকারীর নাম প্যারামিটার হিসেবে পাঠানো হবে।

২. কাস্টম ইভেন্ট হ্যান্ডলিং

Ext.application({
    name: 'MyApp',
    
    launch: function() {
        var userPanel = Ext.create('MyApp.view.UserPanel', {
            renderTo: Ext.getBody()
        });

        // কাস্টম ইভেন্ট 'userLoggedIn' হ্যান্ডল করা
        userPanel.on('userLoggedIn', function(userName) {
            Ext.Msg.alert('Login Success', userName + ' logged in successfully!');
        });

        // কাস্টম ইভেন্ট ট্রিগার করা
        userPanel.fireLoginEvent('John Doe');
    }
});

এখানে, যখন fireLoginEvent মেথডটি কল করা হবে, তখন কাস্টম ইভেন্ট userLoggedIn ট্রিগার হবে। এরপর, সেই ইভেন্টটি হ্যান্ডল করার জন্য on মেথডের মাধ্যমে একটি ইভেন্ট লিসেনার যোগ করা হয়েছে, যা একটি Msg.alert প্রদর্শন করবে।

৩. কাস্টম ইভেন্ট ট্রিগার করার জন্য fireEvent

যখন একটি নির্দিষ্ট পরিস্থিতি ঘটবে, তখন আপনি fireEvent মেথড ব্যবহার করে কাস্টম ইভেন্টটি ট্রিগার করতে পারবেন।

this.fireEvent('userLoggedIn', userName);

এটি userLoggedIn ইভেন্টটি ট্রিগার করবে এবং যে কোনও হ্যান্ডলার এটি হ্যান্ডল করবে।

কাস্টম ইভেন্টের অন্যান্য ব্যবহার

• ইন্টারঅ্যাকটিভ UI: আপনি কাস্টম ইভেন্ট ব্যবহার করতে পারেন যাতে একটি কম্পোনেন্টে ইউজারের কার্যক্রম অনুযায়ী নতুন ইভেন্ট তৈরি হয় (যেমন, কোনো বোতাম ক্লিক হলে নতুন ডেটা লোড হওয়া)।
• কম্পোনেন্টের মধ্যে যোগাযোগ: এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা বা ইভেন্ট পাঠানোর জন্য কাস্টম ইভেন্ট খুবই কার্যকরী।
• অ্যাপ্লিকেশন লজিক: অ্যাপ্লিকেশনের বিশেষ পরিস্থিতিতে কাস্টম ইভেন্ট ব্যবহার করে নির্দিষ্ট লজিক বা ফাংশন ট্রিগার করা।

সারাংশ

• কাস্টম ইভেন্ট: একটি বিশেষ ধরনের ইভেন্ট যা আপনি নিজে তৈরি করেন এবং নির্দিষ্ট পরিস্থিতিতে ট্রিগার করেন।
• fireEvent: এই মেথড ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার করা হয়।
• on: এই মেথড ব্যবহার করে কাস্টম ইভেন্টের জন্য ইভেন্ট লিসেনার (হ্যান্ডলার) সেট করা হয়।

ExtJS এ কাস্টম ইভেন্ট ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের লজিক এবং ইউজার ইন্টারফেসের মধ্যে আরও ভালো সমন্বয় করতে পারেন, যা অ্যাপ্লিকেশনকে আরও কার্যকরী ও রক্ষণাবেক্ষণযোগ্য করে তোলে।

Event delegation এবং bubbling হচ্ছে দুইটি গুরুত্বপূর্ণ ধারণা যা ওয়েব ডেভেলপমেন্টে ইভেন্ট হ্যান্ডলিংয়ের সময় ব্যবহৃত হয়। ExtJS তে এই ধারণাগুলোর ব্যবহার কার্যকরী এবং অ্যাপ্লিকেশন ডেভেলপমেন্টের ক্ষেত্রে পারফরম্যান্স এবং স্কেলেবিলিটি উন্নত করতে সহায়তা করে।

১. Event Delegation

Event Delegation হল একটি কৌশল, যেখানে একটি প্যারেন্ট কম্পোনেন্ট বা এলিমেন্টের ইভেন্ট হ্যান্ডলার একটি চাইল্ড এলিমেন্টের উপর কাজ করে। এটি মূলত ইভেন্ট হ্যান্ডলারকে প্যারেন্ট এলিমেন্টে অ্যাটাচ করে, এবং যখন চাইল্ড এলিমেন্টে কোনো ইভেন্ট ট্রিগার হয়, তখন প্যারেন্ট এলিমেন্ট সেই ইভেন্টটি ক্যাচ করে এবং সঠিক ইভেন্ট হ্যান্ডলার চালায়।

এই কৌশলের মূল সুবিধা হচ্ছে, আপনি একাধিক চাইল্ড এলিমেন্টের জন্য একাধিক ইভেন্ট হ্যান্ডলার না লিখে, একটি সিঙ্গেল ইভেন্ট হ্যান্ডলার দিয়ে সব চাইল্ড এলিমেন্টের ইভেন্ট হ্যান্ডল করতে পারেন। এটি কোডকে আরও কার্যকরী এবং স্কেলেবল করে তোলে।

ExtJS তে Event Delegation এর ব্যবহার:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Event Delegation Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Button 1',
        itemId: 'button1'
    }, {
        xtype: 'button',
        text: 'Button 2',
        itemId: 'button2'
    }],
    
    listeners: {
        render: function() {
            this.el.on('click', function(e, target) {
                // Event delegation: identify which button was clicked
                if (target.id === 'button1') {
                    console.log('Button 1 clicked!');
                } else if (target.id === 'button2') {
                    console.log('Button 2 clicked!');
                }
            });
        }
    }
});

ব্যাখ্যা:

• এখানে, this.el.on ব্যবহার করে প্যানেলের রেন্ডার হওয়ার পর প্যানেলের সমস্ত এলিমেন্টে click ইভেন্ট ডেলিগেট করা হয়েছে।
• একাধিক বাটনের জন্য আলাদা ইভেন্ট হ্যান্ডলার না দিয়ে, প্যারেন্ট এলিমেন্ট থেকে সিঙ্গেল হ্যান্ডলার ব্যবহার করা হয়েছে।
• ইভেন্টের target.id যাচাই করে কোন বাটন ক্লিক হয়েছে তা শনাক্ত করা হয়েছে।

২. Event Bubbling

Event Bubbling হল একটি কৌশল, যেখানে একটি ইভেন্ট একটি চাইল্ড এলিমেন্ট থেকে শুরু হয় এবং ধীরে ধীরে তার প্যারেন্ট এলিমেন্টগুলোর দিকে "বাবল" করে উঠে। অর্থাৎ, যখন কোনো ইভেন্ট কোনো চাইল্ড এলিমেন্টে ঘটে, তখন তা প্যারেন্ট এলিমেন্টগুলির মাধ্যমে উপরে উঠে আসে, যতক্ষণ না তা ডকুমেন্টের রুট (document root) পর্যন্ত পৌঁছায়।

ExtJS তে Event Bubbling এর ব্যবহার:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Event Bubbling Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Click Me!',
        itemId: 'clickButton'
    }],
    
    listeners: {
        render: function() {
            // Bubbling: Catch the click event from child elements (like button)
            this.el.on('click', function(e, target) {
                console.log('Event bubbling triggered!');
            });
        }
    }
});

ব্যাখ্যা:

• এখানে, this.el.on('click', ...) ব্যবহার করা হয়েছে। এটি একটি উদাহরণ যেখানে প্যানেলটি ইভেন্ট বব্বলিংয়ের মাধ্যমে সমস্ত চাইল্ড এলিমেন্টের ক্লিক ইভেন্ট গ্রহণ করছে।
• যেহেতু বাটনটি প্যানেলের একটি চাইল্ড, বাটন ক্লিক হলে এটি ইভেন্টটি বাবল করে প্যানেলে পৌঁছে এবং প্যানেলের ইভেন্ট হ্যান্ডলার সেট হয়।

Event Delegation এবং Bubbling এর মধ্যে পার্থক্য

1. Event Delegation:
   • প্যারেন্ট এলিমেন্টে ইভেন্ট হ্যান্ডলার অ্যাটাচ করা হয়।
   • চাইল্ড এলিমেন্টের ইভেন্টগুলি প্যারেন্ট এলিমেন্টে "ডেলিগেট" হয়ে পৌঁছায়।
   • কোড আরও সিম্পল এবং কার্যকরী হয়, বিশেষ করে অনেক চাইল্ড এলিমেন্টের জন্য।
2. Event Bubbling:
   • ইভেন্টটি চাইল্ড এলিমেন্ট থেকে শুরু হয়ে উপরে প্যারেন্ট এলিমেন্টের দিকে "বাবল" হয়।
   • একাধিক লেভেল পর্যন্ত ইভেন্টটি পৌঁছাতে পারে।
   • ইভেন্টটি প্যারেন্টে গিয়ে ট্রিগার হতে পারে।

ExtJS তে Bubbling বন্ধ করা

ExtJS তে ইভেন্ট বব্বলিং বন্ধ করার জন্য আপনি stopEvent() মেথড ব্যবহার করতে পারেন।

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Stop Event Bubbling Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Click Me!',
        itemId: 'clickButton'
    }],
    
    listeners: {
        render: function() {
            this.el.on('click', function(e, target) {
                // Stop the bubbling of the event
                e.stopEvent();
                console.log('Bubbling stopped!');
            });
        }
    }
});

ব্যাখ্যা:

• e.stopEvent() ব্যবহার করে ইভেন্ট বব্বলিং বন্ধ করা হচ্ছে, যাতে ইভেন্ট প্যারেন্ট এলিমেন্টে পৌঁছাতে না পারে।

সারাংশ

• Event Delegation: প্যারেন্ট এলিমেন্টে একাধিক চাইল্ড এলিমেন্টের জন্য একটি সাধারণ ইভেন্ট হ্যান্ডলার ব্যবহার করে, এটি কোডকে আরো স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
• Event Bubbling: ইভেন্টটি চাইল্ড এলিমেন্ট থেকে প্যারেন্ট এলিমেন্টে যেতে থাকে এবং আপনি এই বব্বলিংয়ের মাধ্যমে ইভেন্ট হ্যান্ডল করতে পারেন।
• Stop Event Bubbling: e.stopEvent() দিয়ে ইভেন্ট বব্বলিং বন্ধ করা যায়, যা প্যারেন্ট এলিমেন্টে পৌঁছানোর আগেই ইভেন্টের প্রসেসিং থামিয়ে দেয়।

এই ধারণাগুলি ব্যবহার করে, আপনি ExtJS অ্যাপ্লিকেশনকে আরও পারফরম্যান্ট এবং সহজে পরিচালনা করতে পারবেন।